<template>
  <el-dialog title="设置条件" v-model="show" width="700px" :append-to-body="true" :close-on-press-escape="true"
             :close-on-click-modal="true">
    <div class="conditionList" v-if="config.value && show">
      <conditionTemp :condition="condition" :config="config.value"></conditionTemp>
    </div>
  </el-dialog>
</template>

<script>
import TableStepMixin from "../../../js/tableStep"
import conditionTemp from "../common/Condition.vue"
import {getCurrentInstance, reactive, ref} from 'vue';

export default {
  mixins: [],
  components: {
    conditionTemp
  },
  data() {
    return {}
  },
  props: {},
  setup() {
    const show = ref(false)
    const config = reactive({value: null})
    const options = reactive()
    const {proxy} = getCurrentInstance()
    const condition = reactive({
      key: 1,
      conditionList: [{
        key: null,
        cond: null,
        val: null,
        andOr: "and"
      }]
    })

    let onRemoteMethodEvent = function (){}
    let onChangeSelectEvent = function (){}
    const openEvent = function (param = {}) {
      show.value = true
      condition.conditionList = param.conditionList || [{
        key: null,
        cond: null,
        val: null,
        andOr: "and"
      }]
      config.value = param.option
      let result = TableStepMixin(config.value, proxy)
      onRemoteMethodEvent = result.onRemoteMethodEvent
      onChangeSelectEvent = result.onChangeSelectEvent
      result.evalColumnMethods()
    }
    const closeEvent = function () {
      show.value = false
      condition.conditionList = []
    }
    return {
      show,
      config,
      condition,
      options,
      openEvent,
      closeEvent,
      onRemoteMethodEvent,
      onChangeSelectEvent,
    }
  },
  mounted() {
  },
  methods: {},
  watch: {}
}
</script>
<style scoped lang="scss">
.conditionList {
  .conditionList_add {
    width: 100%;
    height: 40px;
    position: relative;
    text-align: center;
    line-height: 40px;
    background: var(--primary-light);
    color: var(--primary);
    margin-top: 10px;
    border-radius: 5px;

    &:hover {
      background: var(--primary);
      color: #fff;
    }
  }
}
</style>
